<template>
	<view class="created">
		<nav-bar title="预警督办" leftArrow></nav-bar>

		<view class="created-header">督办内容</view>

		<van-form class="created-form" @submit="onSubmit" label-width="200rpx">
			<van-cell-group inset>
				<van-field label="督办名称" v-model="form.name" type="input" required colon show-word-limit maxlength="100"
					:rules="[{ required: true, message: '请输入督办名称' }]" placeholder="请输入督办名称" />
				<van-field label="督办级别" name="radios" required colon :rules="[{ required: true, message: '请选择督办级别' }]">
					<template #input>
						<van-radio-group v-model="form.level" direction="horizontal">
							<van-radio v-for="(item, index) in levelList" :key="item.value"
								:name="item.value">{{ item.label }}</van-radio>
						</van-radio-group>
					</template>
				</van-field>
				<van-field label="责任人" v-model="form.responsibleName" required is-link readonly colon
					placeholder="请选择责任人" @click="selectShow.user = true"
					:rules="[{ required: true, message: '请选择责任人' }]" />
				<van-field label="指导意见" v-model="form.instruction" type="textarea" rows="4" required colon autosize
					show-word-limit maxlength="200" :rules="[{ required: true, message: '请输入指导意见' }]"
					placeholder="请输入指导意见" />
				<van-field label="计划完成时间" v-model="form.planFinishTime" required colon is-link readonly
					name="datePicker" placeholder="请选择计划完成时间" @click="selectShow.calendar = true"
					:rules="[{ required: true, message: '请选择计划完成时间' }]" />
				<van-field label="下达人" v-model="userInfo.name" colon readonly />
				<!-- <van-field label="督办下达时间" v-model="form.deliveryTime" colon readonly /> -->
			</van-cell-group>

			<view class="created-footer">
				<van-button class="created-button-cancel" type="default" @click="routeBack">取消</van-button>
				<van-button class="created-button-submit" type="primary" native-type="submit">确认</van-button>
			</view>
		</van-form>

		<!-- 选择器 单选 责任人 -->
		<picker-search v-model:show="selectShow.user" :columns="userList" @confirm="onUserConfirm"
			@cancel="selectShow.user = false" />

		<!-- 选择器 时间 年月日时分秒 -->
		<picker-date-time v-model:show="selectShow.calendar" @confirm="onCalendarConfirm"></picker-date-time>
	</view>
</template>

<script setup>
	import dayjs from 'dayjs'

	import {
		ref,
	} from 'vue';

	import {
		apiTypesList,
		apiUsersList,
	} from '@/api/common';

	import {
		apiAlertSuperviseSave
	} from '@/api/warningTodo';

	import {
		devices
	} from '@/local/common';

	import store from '@/store'

	const userInfo = store.getters.GET_USER_INFO.sysUser;
	const form = ref({});

	const selectShow = ref({
		user: false,
		calendar: false,
	});

	// 督办级别
	const levelList = ref([]);
	const getLevelList = () => {
		apiTypesList({
			value: 'alertLevelEnum'
		}).then(res => {
			levelList.value = res;
		});
	};

	// 系统用户列表
	const userList = ref([]);
	const getUserList = () => {
		apiUsersList({
			pageNum: 1,
			pageSize: 9999,
		}).then(res => {
			userList.value = res.records.map(n => ({
				text: n.name,
				value: n.userId
			}));
		})
	}
	const onUserConfirm = ({
		selectedValues,
		selectedOptions
	}) => {
		form.value.responsible = selectedOptions[0].value;
		form.value.responsibleName = selectedOptions[0].text;
		selectShow.value.user = false;
	}

	// 确认 时间 计划完成时间
	const onCalendarConfirm = (value) => {
		form.value.planFinishTime = value;
		selectShow.value.calendar = false;
	}

	const onSubmit = () => {
		const param = {
			...form.value,
			dispatcher: Number(userInfo.userId),
			deliveryTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
		}

		uni.showLoading({
			title: '提交中',
			mask: true
		});

		apiAlertSuperviseSave(param).then(res => {
			uni.navigateTo({
				url: '/pages/warningTodo/index'
			});
		}).finally(() => {
			uni.hideLoading();
		})
	};

	const routeBack = () => {
		uni.navigateBack({
			delta: 1
		});
	}

	getLevelList();
	getUserList();
</script>

<style lang="scss" scoped>
	@import '@/assets/form.scss';

	.created {
		&-header {
			height: 100rpx;
			line-height: 100rpx;
			text-indent: 30rpx;
			color: #333;
		}

		&-form {
			padding-bottom: 20rpx;
		}

		&-footer {
			margin-top: 30rpx;
			padding: 0 30rpx;
			display: flex;
			gap: 30rpx;
		}

		&-button {
			&-submit {
				flex: 1;
			}

			&-cancel {
				width: 140rpx;
			}
		}
	}
</style>